<template>
  <el-drawer
    v-model="playList.drawerShow"
    title="播放列表"
    direction="ltr"
    size="360"
    style="height: 72%; transform: translateY(16%); border-radius: 0 10px 10px 0"
    :lock-scroll="false"
  >
    <el-empty v-if="playList.musicList.length == 0" description="暂无歌曲哦~" />
    <section v-else v-for="item in playList.musicList" class="listBox">
      <div class="listBox1">
        <strong>{{ item.name }}</strong>
        <p style="font-size: 14px">{{ item.singer }}</p>
      </div>
      <div class="listBox2" style="font-size: 14px">{{ item.time }}</div>
      <el-popover :width="150" trigger="click">
        <template #reference>
          <el-icon class="listBox3" @click=""><MoreFilled /></el-icon>
        </template>
        <article>
          <div class="secondMenu" @click="addEvent(1)">
            <span>添加到我的喜欢</span>
          </div>
          <div class="secondMenu" @click="addEvent(2)">
            <span>添加到我的收藏</span>
          </div>
        </article>
      </el-popover>
    </section>
  </el-drawer>
</template>

<script setup>
import { ref } from 'vue'
import { MoreFilled } from '@element-plus/icons-vue'
import { musicPlayerStore } from '@/stores/musicPlayer'
// import { storeToRefs } from 'pinia'
const store = musicPlayerStore()
// const { listDrawerShow } = storeToRefs(store)
const { playList } = store

const addEvent = (e) => {
  if (e == 1) {
  }
  if (e == 2) {
  }
}
</script>

<style scoped>
.secondMenu {
  text-align: center;
  margin: 5px 0 5px 0;
  cursor: pointer;
}
.listBox3 {
  width: 14%;
  text-align: center;
  cursor: pointer;
}

.listBox2 {
  width: 14%;
  text-align: center;
}

.listBox1 {
  width: 72%;
  cursor: pointer;
}

.listBox {
  width: 100%;
  height: 60px;
  /* background-color: #72dfd0; */
  color: black;
  display: flex;
  align-items: center;
}
</style>
